<template>
    <div class="container">
        <!-- 上传按钮 -->
        <div class="buttonBox">
            <router-link to="/upload">
                <el-tooltip content="EXCEL数据采集" placement="top">
                    <el-button type="primary" icon="el-icon-edit" circle></el-button>
                </el-tooltip>
            </router-link>
        </div>

        <!-- 搜索区域 -->
        <div class="searchBox">
            <el-input v-model="search" placeholder="基于姓名、手机模糊搜索" @change="searchHandle"></el-input>
            <el-button type="success" @click="submit" :disabled="disabled">导出选中的数据</el-button>
        </div>

        <!-- 列表区域 -->
        <div class="tableBox">
            <el-table
                :data="tableData"
                :height="height"
                style="width: 100%"
                v-loading="loading"
                element-loading-text="小主，奴家正在努力加载中..."
                @selection-change="selectionChange"
            >
                <el-table-column type="selection" width="50" align="center"></el-table-column>
                <el-table-column prop="id" label="编号" min-width="10%"></el-table-column>
                <el-table-column prop="name" label="姓名" min-width="20%"></el-table-column>
                <el-table-column prop="phone" label="电话" min-width="20%"></el-table-column>
                <el-table-column prop="time" label="创建时间" min-width="25%" :formatter="formatter"></el-table-column>
            </el-table>
        </div>

        <!-- 分页区域 -->
        <div class="pageBox">
            <el-pagination
                background
                hide-on-single-page
                layout="total, sizes, prev, pager, next"
                :page-size="pageSize"
                :current-page="page"
                :total="total"
                @size-change="sizeChange"
                @current-change="prevNext"
                @prev-click="prevNext"
                @next-click="prevNext"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
import xslx from "xlsx";
import { Loading } from "element-ui";
import { formatTime } from "./assets/lib/utils";
import { queryList } from "./api/index";
export default {
    name: "Home",
    data() {
        return {
            // 表格相关
            tableData: [],
            loading: false,
            height: document.documentElement.clientHeight - 120,
            // 分页相关
            pageSize: 20,
            page: 1,
            total: 0,
            search: "",
            // 选中数据
            selectionList: [],
            disabled: false
        };
    },
    methods: {
        // 全选
        selectionChange(val) {
            this.selectionList = val;
        },
        // 格式化
        formatter(row, column, cellValue) {
            return formatTime(cellValue, "{0}-{1}-{2} {3}:{4}:{5}");
        },
        // 获取数据
        async queryData() {
            this.loading = true;

            let options = {
                limit: this.pageSize,
                page: this.page,
                search: this.search
            };
            let result = await queryList(options);
            if (parseInt(result.code) === 0) {
                this.tableData = result.data;
                this.page = parseFloat(result.page);
                this.pageSize = parseFloat(result.limit);
                this.total = parseFloat(result.count);
            }

            this.loading = false;
        },
        // 搜索按钮
        searchHandle() {
            this.page = 1;
            this.queryData();
        },
        // 分页的处理
        sizeChange(val) {
            this.pageSize = val;
            this.page = 1;
            this.queryData();
        },
        prevNext(val) {
            this.page = val;
            this.queryData();
        },
        // 导出数据
        submit() {
            if (this.selectionList.length <= 0) {
                this.$message({
                    message: "小主，请您先选择要导出的数据哦！",
                    type: "warning",
                    showClose: true
                });
                return;
            }

            this.disabled = true;
            let loadingInstance = Loading.service({
                text: "小主，请您稍等片刻，奴家正在玩命处理中...",
                background: "rgba(0,0,0,.5)"
            });

            // 导出后的数据格式
            let arr = this.selectionList.map(item => {
                return {
                    编号: item.id,
                    姓名: item.name,
                    电话: item.phone
                };
            });
            // 把JSON变成sheet
            let sheet = xslx.utils.json_to_sheet(arr),
                // 新建一个表格
                book = xslx.utils.book_new();
            // 添加数据到新表格
            xslx.utils.book_append_sheet(book, sheet, "sheet1");
            // 写入文件
            xslx.writeFile(book, `user${new Date().getTime()}.xls`);

            loadingInstance.close();
            this.disabled = false;
        }
    },
    created() {
        this.queryData();
    }
};
</script>
<style lang='less' scoped>
.buttonBox {
    position: fixed;
    top: 10px;
    right: 20px;
    z-index: 9999;
}

.searchBox {
    padding: 10px;
    display: flex;
    align-items: centers;

    .el-input {
        width: 30%;
    }

    .el-button {
        margin-left: 20px;
    }
}

.pageBox {
    margin-top: 10px;
    text-align: right;
}
</style>